<template>
  <div class="registerInfo-container">
    <modules-title title-name="财务详情">
      <template slot="btn">
        <el-button class="border-btn" @click="back" size="small">返回</el-button>
      </template>
    </modules-title>
    <div class="container">
      <div class="title">
        <ul class="u1">

          <li>
            <span>订单类型 ：</span>
            <span v-if="data.sell_method === 1"> 直接售药</span>
            <span v-else-if="data.sell_method === 2">门诊病例</span>
            <span v-else-if="data.sell_method === 0">挂号</span>
          </li>
          <li>
            <span>患者 ：</span><span>{{data.real_name}}</span>
          </li>
          <li>
            <span>医生 ：</span><span>{{data.doctor_name}}</span>
          </li>
        </ul>
        <ul class="u2">
          <li>
            <p v-if="data.sell_method === 0"><span>挂号日期 ：</span><span>{{data.charge_time | dateFormat}}</span></p>
            <p v-else><span>就诊日期 ：</span><span>{{data.created_at | dateFormat}}</span></p>
          </li>
          <li>
            <span>诊断类型 ：</span>
            <span v-if="data.medical_record_repeat == 1">初诊</span>
            <span v-else-if="data.medical_record_repeat == 2">复诊</span>
          </li>
          <li>
            <span>总金额：</span><span class="price">￥{{data.amount | moneyFormat}}</span>
          </li>
          <li>
            <span>应收金额：</span><span class="price">￥{{data.receivable_amount | moneyFormat}}</span>
          </li>
        </ul>
        <ul class="u3" v-for="(item,idx) in data.charge_detail" :key="idx">
          <li>
            <span v-if="item.option_type === 1">收费时间 ：</span>
            <span v-else-if="item.option_type === 2">退费时间 ：</span>
            <span>{{item.created_at | dateFormat}}
            </span>
          </li>

          <li>
            <span>收费员 ：</span><span>{{item.user_name}}</span>
          </li>
          <li>
            <span>优惠金额 ：</span><span class="price">￥{{item.dis_amount | moneyFormat}}</span>
          </li>
          <li>
            <span v-if="item.option_type === 1">应收金额 ：</span>
            <span v-else-if="item.option_type === 2">应退金额 ：</span>
            <span class="price">￥{{item.amount | moneyFormat}}</span>
          </li>
          <li>
            <span v-if="item.option_type === 1">实收金额 ：</span>
            <span v-else-if="item.option_type === 2">实退金额 ：</span>
            <span class="price">￥{{item.receipts_amount | moneyFormat}}</span>
          </li>
          <li>
            <span>支付方式：</span>
            <span v-if="item.pay_type === 1">现金</span>
            <span v-else-if="item.pay_type === 2">支付宝</span>
            <span v-else-if="item.pay_type === 3">微信</span>
            <span v-else-if="item.pay_type === 4">医保卡</span>
          </li>
        </ul>
      </div>
      <div v-if="data.register_detail !== null" class="container-box">
        <p class="container-title">挂号费</p>
        <el-table
          :data="register_detail"
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
        >
          <el-table-column label="挂号时间">
            <template #default="{row}">
              {{row.created_at | dateFormat}}
            </template>
          </el-table-column>
          <el-table-column label="科室" prop="department_name"></el-table-column>
          <el-table-column label="医生" prop="doctor_name"></el-table-column>
          <el-table-column label="患者" prop="real_name"></el-table-column>
          <el-table-column label="实付金额">
            <template #default="{row}">
              <span class="price">￥ {{row.final_amount | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="优惠金额">
            <template #default="{row}">
              <span class="price">￥ {{row.discount_amount | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="应付金额">
            <template #default="{row}">
              <span class="price">￥ {{row.receivable_amount | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否退号">
            <template #default="{row}">
              <span v-if="row.is_returns === true">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="data.check_item" class="container-box">
        <p class="container-title">检查治疗单</p>
        <el-table
          :data="data.check_item"
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
        >
          <el-table-column label="检查名称" >
            <template #default="{row}">
              {{row.check_item_name}}
            </template>
          </el-table-column>
          <el-table-column label="单价">
            <template #default="{row}">
              <span class="price">￥ {{row.price | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="check_item_number"></el-table-column>
          <el-table-column label="退货数量" prop="returns_number"></el-table-column>
          <el-table-column label="金额">
            <template #default="{row}">
              <span class="price">￥ {{row.amount | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="{row}">
              <span >  </span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="{row}">
              <span >  </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="data.surcharge" class="container-box">
        <p class="container-title">附加费用</p>
        <el-table
          :data="data.surcharge"
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
        >
          <el-table-column label="费用名称" >
            <template #default="{row}">
              <span>{{row.surcharge_name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价">
            <template #default="{row}">
              <span class="price">￥ {{row.cost_price | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="	是否退费" prop="number">
            <template #default="{row}">
              <span v-if="row.is_sales === true"> 已退费</span>
              <span v-else> 暂无退费</span>
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template #default="{row}">
              <span class="price">￥ {{row.amount | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="{row}">
              <span >  </span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="{row}">
              <span >  </span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="{row}">
              <span >  </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="data.prescription" class="container-box" v-for="(item,idx) in data.prescription" :key="idx">
        <p class="container-title">处方{{idx + 1}}</p>
        <el-table
          :data="item.details"
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
        >
          <el-table-column label="产品名称" prop="product_name"></el-table-column>
          <el-table-column label="规格包装" prop="pack"></el-table-column>
          <el-table-column label="厂家" prop="production"></el-table-column>
          <el-table-column label="单价">
            <template #default="{row}">
              <span class="price">￥ {{row.price | moneyFormat}}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template #default="{row}">
              <span> {{row.number}}{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="退货数量">
            <template #default="{row}">
              <span> {{row.returns_number}}{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template #default="{row}">
              <span class="price">￥ {{row.amount | moneyFormat}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import {getFinance} from '@/api/statistical';

  export default {
    name: "detail",
    data() {
      return {
        data: {},
        charge_detail: [],
        register_detail: [],
        tableData: [
          {
            date: '2021-02-01 15:00:00',
            type: '退款',
            name: '谈过',
            phone: '1333333333',
            amount: '￥30.00',
            payment: '现金'
          }
        ]
      }
    },
    created() {
      this.getFinanceData()
    },
    methods: {
      //获取数据
      getFinanceData() {
        let id;
        if (this.$route.query.id) {
          id = this.$route.query.id
        }
        getFinance(id).then(res => {
          if (res.code === 200) {
            this.data = res.data
            this.register_detail.push(res.data.register_detail)
            this.charge_detail = res.data.charge_detail
            // this.tableData = res.data
          }
        })
      },
      //返回
      back() {
        this.$router.go(-1)
      }
    }

  }
</script>

<style scoped lang="scss">
  @import "@/assets/scss/statistical/detail.scss";
</style>
